<template>
    <div>
        <h1>用户信息</h1>
        <TableUser @myevent="handleMyEvent"></TableUser>
        <hr>
        <h2>输入群名<input v-model="groupname" placeholder="请输入内容"></input>
            <el-button type="primary" round @click="handleinput">提交
            </el-button>
        </h2>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
        </el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="data in namelists" :label="data.username" :key="data.username">{{data.username}}
            </el-checkbox>
        </el-checkbox-group>
    </div>

</template>

<script>
    import TableUser from "@/components/TableUser";
    import axios from "axios";

    export default {
        name: "UserView",
        components: {
            TableUser,
        },
        data() {
            return {
                checkAll: false,
                checkedCities: [],
                namelists: [],
                isIndeterminate: true,
                groupname: ''
            }
        },
        methods: {
            handleCheckAllChange(val) {
                this.checkedCities = val ? this.namelists : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.namelists.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.namelists.length;
            },
            handleMyEvent(item) {
                this.namelists = item
            },
            handleinput() {
                console.log(this.checkedCities)
                axios
                    .get('http://127.0.0.1:8000/api/creatgroup/', {
                        headers: {
                            token: sessionStorage.getItem('token')
                        },
                        params:{
                            username:this.checkedCities,
                            groupname:this.groupname
                        }
                    })
                    .then(response => {
                        this.usrlist = response.data.results;
                        this.$emit('myevent', this.usrlist)
                        this.username = sessionStorage.getItem('username')
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }
</script>

<style scoped>

</style>